<template>
	<!-- :customStyle="{bottom:'105px'||0}" -->
	<u-popup :show="show" bgColor="transparent" @close="closeMore">
		<view class="popup_con">
			<view class="fixedTitle_oblation">
				<view class="left"></view>
				<view class="middle">
					{{ props.titleTxt }}
				</view>
				<view class="right">
					<u-icon
						@click="closeMore"
						class="close"
						name="close"
						color="black"
						size="20"
					></u-icon>
				</view>
			</view>
			<view class="container">
				<view class="left">
					<view
						@click="setIndex(index)"
						v-for="(item, index) in list"
						:class="{ detail_active: activeIndex == index }"
						:key="index"
					>
						{{ item.type }}
					</view>
				</view>
				<view class="right" :style="{ height: `calc(872rpx - ${bottom_height})` }">
					<view class="goods">
						<view
							@click="chooseItem(item, index)"
							class="goods_con"
							v-for="(item, index) in list[activeIndex].items"
						>
							<view :class="['kuang', item.checked && 'active']">
								<image
									class="kuang_img"
									:src="item.offeringsImageUrl"
									mode=""
								></image>
								<view class="kuang_check" v-if="item.checked">
									<image :src="imgUrl + 'imgs/worship/check.png'"></image>
								</view>
							</view>
							<view class="goods_name">{{ item.offeringName }}</view>
							<view
								class="goods_price"
								:style="{ color: item.price == 0 ? '#FBC438' : '#524630' }"
							>
								{{ item.price == 0 ? '免费' : item.price + '福币' }}
							</view>
							<view class="goods_time">
								<up-icon name="clock" color="#999999" size="20rpx"></up-icon>
								{{ item.lifespan === 0 ? '永久' : item.lifespan + '天' }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
	<Footer
		@sendHeight="sendHeight"
		@openEquip="openEquip"
		v-if="show"
		:buyList="buyList"
		type="oblation"
		:offeringType="props.offeringType"
		@queryParent="queryParent"
		@buy="buy"
	/>
	<Equip ref="EquipRef" :bottom_height="bottom_height" :buyList="buyList" @del="del" />
</template>

<script setup>
import _ from 'lodash';
import { ref, watch, defineProps, defineEmits } from 'vue';
import Footer from '@/subPages/common/footer.vue';
import { onReady, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import { imgUrl } from '@/external/utils/imgUrl.js';
import Equip from './equip.vue';
import MineApi from '@/API/mine/index.js';
import { active } from 'd3';
const mineApi = new MineApi();
const props = defineProps({
	offeringType: {
		type: Number || String
	},
	titleTxt: {
		type: String,
		default: '送取祭品'
	}
});
const emit = defineEmits(['query', 'finish']);
const show = ref(false);
const activeIndex = ref(0);
const EquipRef = ref();
let height = ref(0);
let bottom_height = ref(0); //底部高度footer组件高度
let tabList = ref([]);
let buyList = ref([]);
let list = ref([{}]);
//微信小程序上支持类型穿透
defineOptions({
	options: {
		styleIsolation: 'shared'
	}
});

const setIndex = (index) => {
	activeIndex.value = index;
};
const clear = () => {
	show.value = false;
	list.value.forEach((ele) => {
		ele.items.forEach((item) => (item.checked = false));
	});
	buyList.value = [];
};
// 购买完成
const queryParent = () => {
	let imgs = buyList.value.map((ele) => ele.offeringsImageUrl);
	emit('query', imgs);
	clear();
};
// 删除装备列表时同步取消选中
const del = (e) => {
	list.value[activeIndex.value].items.forEach((ele, index) => {
		if (ele.offeringId == e.id) {
			ele.checked = false;
		}
	});
	buyList.value = e.buyList;
};

//选中商品
const chooseItem = _.throttle(function (item, index) {
	if (item.checked) {
		item.checked = false;
		const indexToRemove = list.value[activeIndex.value].items.indexOf(item.offeringName);
		if (indexToRemove == -1) {
			buyList.value.splice(indexToRemove, 1);
		}
	} else {
		//同类型商品取消
		// 所有勾选id
		// let ids = buyList.value.map((i) => i.offeringId);
		// // 同类型所有id
		// let sameType_ids = list.value
		// 	.filter((items) => items.type === item.typeName)[0]
		// 	.items.map((i) => i.offeringId);
		// // console.log(sameType_ids);
		// sameType_ids.map((id) => {
		// 	//如果勾选的id包含同类型id
		// 	if (ids.indexOf(id) !== -1) {
		// 		//删除同类型的
		// 		buyList.value.splice(ids.indexOf(id), 1);
		// 		//取消勾选同类型的
		// 		list.value[activeIndex.value].items.map((item, index) => {
		// 			if (item.offeringId === id) {
		// 				list.value[activeIndex.value].items[index].checked = false;
		// 			}
		// 		});
		// 	}
		// });
		item.checked = true;
		buyList.value.push(item);
	}
}, 200);
const sendHeight = (e) => {
	bottom_height.value = e + 'px';
	// uni.createSelectorQuery()
	// 	.select('.container .left')
	// 	.boundingClientRect((res) => {
	// 		console.log(res);
	// 		height.value = res.height - e + 'px';
	// 	})
	// 	.exec();
};
// 关闭祭品弹窗
const closeMore = () => {
	clear();
};
// 打开装备弹出
const openEquip = (e) => {
	EquipRef.value.show = e;
};
const query = () => {
	mineApi
		.getAllOfferingList({
			offeringType: props.offeringType
		})
		.then((res) => {
			let allType = { type: '全部', items: [] };
			list.value = Object.entries(res.data.allOfferingMap).map(([key, value]) => {
				value = value.map((item) => {
					return { ...item, typeName: key };
				});
				allType.items = allType.items.concat(value);
				return {
					type: key,
					items: value
				};
			});
			list.value.unshift(allType);
			console.log(list.value);
		});
};

/**
 * 购买祭品
 */
const buy = (buyList) => {
	let ids = buyList.map((ele) => ele.offeringId);
	mineApi
		.buyOffering({
			offeringIdStr: ids,
			buyAmountStr: new Array(ids.length).fill(1),
			correspondingId:
				props.offeringType == 1
					? JSON.parse(uni.getStorageSync('cemeteryItem')).memorialId
					: props.offeringType == 2
					? JSON.parse(uni.getStorageSync('cemeteryItem')).memorialId
					: props.offeringType == 3
					? uni.getStorageSync('memorialServiceId')
					: props.offeringType == 4
					? uni.getStorageSync('peopleId')
					: props.offeringType == 5
					? uni.getStorageSync('hallId')
					: undefined,
			// 在哪里购买（1:纪念馆，2:墓园，3:追思会，4:祭拜，5:祠堂）
			belongingTo: props.offeringType
		})
		.then((res) => {
			if (res.code === 0) {
				show.value = false;
				clear();
				emit('finish', buyList);
			}
		})
		.catch(() => {});
};

watch(show, (n, o) => {
	if (show.value) {
		query();
	} else {
		buyList.value = [];
	}
});
defineExpose({
	show
});
</script>

<style lang="scss">
::v-deep .u-popup__content {
	padding: 0 !important;
}

.popup_con {
	background: linear-gradient(180deg, rgba(255, 234, 195, 0.4) 0%, rgba(255, 255, 255, 0) 100%),
		#ffffff;
	border-radius: 32rpx 32rpx 0 0;
}

.fixedTitle_oblation {
	width: 100%;
	font-size: 32rpx;
	color: #524630;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1rpx solid rgba(212, 198, 179, 0.2);

	.left,
	.right {
		width: 100rpx;
		flex-shrink: 0;
	}

	.right {
		display: flex;
		justify-content: flex-end;
		padding-right: 32rpx;
		box-sizing: border-box;
	}

	.middle {
		flex: 1;
		text-align: center;
	}
}

.close {
	width: 48rpx;
	height: 48rpx;
}

.container {
	display: flex;
	font-weight: 400;
	font-size: 32rpx;
	color: #8e775b;
	line-height: 32rpx;
	height: 872rpx;

	.left {
		min-width: 148rpx;
		flex-shrink: 0;
		border-right: 1rpx solid rgba(212, 198, 179, 0.2);

		view {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 88rpx;
			padding: 0 24rpx;
		}
	}

	.right {
		flex: 1;
		height: 872rpx;
		padding: 0 44rpx 32rpx;
		box-sizing: border-box;
		overflow: scroll;

		.goods {
			display: grid;
			grid-template-columns: repeat(3, 1fr);

			.goods_con {
				margin-top: 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.active {
					border: 3rpx solid #524630 !important;
				}

				.kuang {
					width: 144rpx;
					height: 144rpx;
					margin-bottom: 16rpx;
					background: #fff;
					border-radius: 8rpx;
					border: 2rpx solid #d4c6b3;
					position: relative;

					.kuang_img {
						width: 100%;
						height: 100%;
					}

					.kuang_check {
						position: absolute;
						bottom: -2rpx;
						right: -2rpx;
						background-color: rgba(82, 70, 48, 1);
						width: 40rpx;
						height: 32rpx;
						border-radius: 16rpx 0rpx 8rpx 0rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						image {
							width: 20rpx;
							height: 20rpx;
						}
					}
				}

				.goods_name {
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 28rpx;
				}

				.goods_price {
					margin-top: 12rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #524630;
					line-height: 24rpx;
				}

				.goods_time {
					color: #999999;
					font-size: 20rpx;
					display: flex;
					align-items: center;
					margin-top: 12rpx;
				}
			}
		}
	}
}

.detail_active {
	background-color: #d4c6b3 !important;
	color: #524630 !important;
}
</style>
